<template>
	<div class="prinit-page">
		<el-form :model="form" label-width="auto" style="max-width: 600px">
			<!-- 第一行：物料编码 和 物料版本 -->
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="物料编码">
						<el-select v-model="form.materialid" placeholder="请选择物料" filterable
						>
							<el-option v-for="item of materialList" :key="item.id" :label="item.materialNo"
												 :value="item.id">
								<span style="float: left">{{ item.materialNo }}</span>
								<span style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "> {{ item.materialName }} </span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物料版本">
						<el-input v-model="form.materialVersion" />
					</el-form-item>
				</el-col>
				<!-- 第二行：物料数量 和 产品名称 -->
				<el-col :span="12">
					<el-form-item label="物料数量">
						<el-input v-model="form.materialCount" />
					</el-form-item>
				</el-col>

				<!-- 第三行：设备名称 和 产品状态 -->
				<el-col :span="24">
					<el-form-item label="设备编码">
						<el-select v-model="form.equipmentId" placeholder="请选择设备" filterable>
							<el-option v-for="item in equipmentData" :key="item.id" :label="item.equipmentCode" :value="item.id">
								<span style="float: left">{{ item.equipmentCode }}</span>
								<span style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "> {{ item.equipmentName }} </span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="追溯码">
						<el-input v-model="form.traceCode" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="批次号">
						<el-input v-model="form.batchNo" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="生产计划号">
						<el-input v-model="form.planNo" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="产品状态">
						<el-select v-model="form.productStatus" placeholder="请选择产品状态" filterable>
							<el-option v-for="item of productStatusList" :key="item.label" :label="item.label"
												 :value="item.label" />
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 第四行：报工时间 和 登记人 -->

				<el-col :span="12">
					<el-form-item label="报工人">
						<el-input v-model="form.reportUserName" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="报工时间">
						<el-date-picker
							v-model="form.reportDateTime"
							type="datetime"
							placeholder="选择"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
							date-format="YYYY-MM-DD"
							time-format="HH:mm:ss"
						/>

					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="工装编码">
						<el-input v-model="form.registerName" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注">
						<el-input type="textarea" v-model="form.remark" />
					</el-form-item>
				</el-col>
				<!-- 提交按钮 -->
				<el-col :span="24" style="text-align: right;">
					<el-button type="primary" @click="onSubmit">提交</el-button>
					<el-button @click="reset">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import axiosInstance from '@/utils/http/api';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const form = ref({});
const materialList = ref([]);
const equipmentData = ref([]);
onMounted(() => {
	getOption();
});

const { proxy }: any = getCurrentInstance();

const reset = () => {
	form.value = {};
};

const productStatusList = ref([{
	label: '成品'
}, {
	label: '半成品'
}]);

const onSubmit = () => {
	const param = JSON.parse(JSON.stringify(form.value));
	if (param.materialid) {
		param.materialNo = materialList.value.find(item => item.id == param.materialid).materialNo;
	}
	if (param.equipmentId) {
		let eList = equipmentData.value.find(item => item.id == param.equipmentId);
		param.equipmentName = eList.equipmentCode + '/' + eList.equipmentName;
	}
	axiosInstance.post('/api/reportWorkRecord/updateCustomLabelPrintingData', param)
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			const templateName = '/test_print1/EmpReportWorkSupplementTemplate.cpt';
			proxy.$printClick(templateName, [{ id: 0 }]);

		});
};


const getOption = () => {
	axiosInstance.post('/api/basedataMaterial/getAll', {})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			materialList.value = res.data;
		});


	axiosInstance.post('/api/basedataEquipment/getAll', {})
		.then((res) => {
			if (res.code !== 200) {
				ElMessage.warning(res.message);
				return false;
			}
			equipmentData.value = res.data;
		});

};

</script>

<style scoped>
.prinit-page {
	background: #fff;
	padding: 15px;
}
</style>
